<template>
  <div class="created_address">
    <navBar :title="title"></navBar>
    <ul class="input_list">
      <li>
        <span class="name">收货人：</span>
        <van-field v-model="address.consignee" placeholder="收货人姓名" />
      </li>
      <li>
        <span class="name">手机号码：</span>
        <van-field v-model="address.mobile" placeholder="配送员联系您的电话" />
      </li>
      <li @click="showPicker=true">
        <span class="name">省/市/区</span>
        <span class="value">{{select_address}}</span>
      </li>
      <li>
        <span class="name">详细地址：</span>
        <van-field v-model="address.address" placeholder="小区/写字楼/学校" />
      </li>
      <!--<li>-->
        <!--<span class="name">楼号门牌：</span>-->
        <!--<van-field v-model="address.addressInfo" placeholder="列如：A座909室" />-->
      <!--</li>-->
      <!-- <li>
        <span>标签：</span>
        <span class="tag">家</span>
        <span class="tag">公司</span>
        <span class="tag">父母家</span>
      </li> -->
    </ul>
    <div class="save_address delete_address van-button van-button--danger van-button--normal" @click="deleteAddress" v-if="address_id">删除</div>
    <div class="save_address" @click="saveAddress">保存</div>
    <van-popup v-model="showPicker" position="bottom">
      <van-area :area-list="addressList" :loading="loading" @cancel="onCancel" @confirm="onConfirm" :value="select_address_code"/>
    </van-popup>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { Area, Popup } from 'vant';
Vue.use(Area).use(Popup);
import { Button } from 'vant';
Vue.use(Button);
import navBar from "components/navBar";
import { Field, Cell, CellGroup } from "vant";
import { mapActions } from "vuex";
Vue.use(Field)
  .use(Cell)
  .use(CellGroup);
import region from "@/utils/region";
export default {
  name: "created_address",
  data() {
    return {
      title: "编辑地址",
      showPicker: false,
      loading: false,
      value: "",
      addressList: region,
      addressListObj: {},
      select_address: '请选择',
      select_address_code: "101001",
      address: {
        consignee: "",
        mobile: "",
        address: "",
        email: "",
        country: "",
        addressInfo: "",
        province: "",
        city: "",
        tag: ""
      },
      address_id:this.$route.query.address_id
    };
  },
  components: {
    navBar
  },
  mounted(){    
    this.getAddress();
    this.getAddressConfig();
  },
  methods: {
    ...mapActions(["addrDetail","editAddr"]),
    getAddress(){
      console.log('address_id', this.address_id);
      if(this.address_id == undefined){
        this.address_id = 0;
        this.title = "添加地址";
        return;
      }
      this.addrDetail({
        id:this.address_id
      }).then(res=>{
        console.log('[addrDetail]', res);
        this.address = res.data.result
        this.select_address_code = ''+res.data.result.area_code
        this.select_address = res.data.result.address_area 
      }).catch(res=>{
        console.log(res)
        this.$toast('网络错误！请联系管理员')
      })
    },
    saveAddress() {
      this.editAddr({
        address_id:this.address_id,
        consignee:this.address.consignee,
        address:this.address.address,
        email:this.address.email,
        country:this.address.country,
        province:this.address.province,
        city:this.address.city,
        mobile: this.address.mobile,
        area_code: this.select_address_code,
      }).then(res=>{
        console.log('[editAddr]', res);
        this.$router.push({
          path: '/myAddressManagement'
        })
      }).catch(res=>{
        // this.$toast('网络错误！请联系管理员')
      })
    },
    deleteAddress(){
      Dialog.alert({
        title: '提示',
        message: '确定删除当前地址吗？'
      }).then(() => {
        this.$store.dispatch('delAddress',{
          address_id: this.address_id
        }).then(r => {
          this.$router.push({
            path: '/myAddressManagement'
          })
        }).catch(e=>{

        })
      });
      
    },
    getAddressConfig(){
      if(this.addressList) return false
      console.log('获取地址')
      this.loading = true
      this.$store.dispatch('addressConfig',{
        getAll: 1
      }).then((res) => {
        console.log('获取地址', res)
        this.addressList = res.data.result
        this.dealData()
        this.loading = false
      }).catch(e=>{
        this.loading = false
        // this.$toast('获取地址配置失败')
      })
    },
    onConfirm(data, arrIndex){
      console.log('f', data)
      let a = []
      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        a.push(element.name)
      }
      this.select_address = a.join(' ')
      this.select_address_code = data[2].code
      this.showPicker = false
    },
    onCancel(){
      this.showPicker = false
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" >
.created_address {
  height: 100vh;
  background-color: #fff;
  .input_list {
    padding-top: 20px;
    padding-left: 20px;
    li {
      display: flex;
      align-items: center;
      height: 43px;
      border-bottom: 1px solid #e0e0e0;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
      &:last-child {
        border-bottom: 1px solid transparent;
      }
      .name {
        flex: 1;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 48, 48, 1);
      }
      .value{
        color: #666;
        flex: 3;
        padding-left: 10px;
        background-color: transparent;
      }
      .van-cell {
        flex: 3;
        background-color: transparent;
      }
      .tag {
        margin-right: 8px;
        width: 60px;
        height: 22px;
        border-radius: 3px;
        border: 1px solid rgba(151, 151, 151, 1);
        text-align: center;
      }
    }
  }
  .save_address {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    line-height: 41px;
    width: 333px;
    height: 41px;
    background: linear-gradient(
      90deg,
      rgba(1, 47, 64, 1) 0%,
      rgba(1, 47, 64, 1) 100%
    );
    font-size: 15px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    &.delete_address{
      bottom:  70px;
      background: #f44 !important;
    }
  }
}
</style>
